<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<title>小卖铺</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<style type="text/css">
		    body{background-color: #f4f4f4 !important;}
           .header{position:fixed;top: 0;width: 100%;background: #fff;z-index: 999;}
		   .headcon{width: 1200px;margin: auto; display: flex;align-items: center;color: #1E9FFF;padding: 30px 0;}
		   .headcon .tit{font-size: 36px;font-weight: 700;}
		   .headcon .search{display: flex;align-items: center;border: 2px solid #1E9FFF;margin-left: 200px;height: 40px;border-radius: 8px;}
		   .headcon .search input{border: none;width: 500px;}
		   .headcon .searchbtn{background: #1E9FFF;width: 100px;text-align: center;height: 40px;color: #fff;line-height: 40px;font-size: 18px;cursor: pointer;border-bottom-right-radius: 5px;border-top-right-radius: 5px;}
	       
		   .goods{background-color: #f4f4f4;padding: 30px 0;min-height: 80vh;}
		   .goodscon{width: 1200px;margin: auto;background-color: #fff;}
		   .goodscon .nodata{text-align: center;padding: 100px;font-size: 18px;color: #888;display: none;}
		   .goodscon .itemlist{display: flex;align-items: center;padding: 20px;border-radius: 10px;flex-wrap: wrap}
		   .goodscon .item{width: 210px;margin: 10px;border: 1px solid #ddd;cursor: pointer;position: relative;}
		   .goodscon .item .zticon{position: absolute;top: 0;left: 0;z-index: 99;width: 50px;height: 50px;}
		   .goodscon .item img{width:210px;height: 	210px;}
		   .goodscon .item .top{position: relative;}
		   .goodscon .item .top div{position: absolute;bottom: 0;right: 0;background: #999;color: #fff;padding: 2px 5px;font-size: 12px;}
		   .goodscon .item .con{padding: 10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;height: 15px;}
		   .goodscon .item .bom{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
		   .goodscon .item .bom div:nth-child(1){color: #ee5417;}
		   .goodscon .item .bom div:nth-child(2){color: #999;font-size: 12px;position: relative;top: -5px;}
		   .goodscon .item .bom2{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
		   .goodscon .item .bom2 div:nth-child(1){color: #999;font-size: 12px;position: relative;top: -5px;}
		   .goodscon .item .bom2 div:nth-child(2){color: #999;font-size: 12px;position: relative;top: -5px;}
		   .goodscon .item .bom3{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
		   .goodscon .item .bom3 div:nth-child(1){color: #999;font-size: 12px;position: relative;top: -5px; right: -5px;}
	
	</style>
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
</head>
<body>
	<div class="header">
         <div class="headcon">
              <div class="tit">学分礼品商城</div>
			  <div class="search">
				   <i class="layui-icon layui-icon-search" style="font-size: 22px; color: #1E9FFF;margin: 0 10px;"></i>  
				   <input type="text" id="id_content" class="code" placeholder="搜索礼品"/>
				   <div class="searchbtn" onclick="loadPage()">搜 索</div>
			  </div>
		 </div>
	</div>
	<div style="width: 100%;height:110px"></div>
	<div class="goods">
        <div class="goodscon">
			<div class="nodata">
				<img style="width: 200px;height:200px" src="/static/img/nodata.png" alt="">
				<div>暂无数据</div>
			</div>
			<div class="itemlist"></div>
			<div id="demo2"></div>
		</div>
	</div>

<script type="text/javascript">
var urlList = '/api/inter/tmGoods/list';
var totalNum = 0;

var $,layer,laydate,form,table,wherestr={};
layui.use(['table','laydate','form','layer','jquery','element','laypage'], function () {
	$ = layui.$, layer = layui.layer,laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element, laypage = layui.laypage;
	
	// 加载页面
	loadPage();
});

function loadPage() {
	// 加载第一页数据
	listData(1);
	
	// 加载分页导航
	loadLayPage();
}

/*
 * 加载列表数据
 */
function listData(page){
	var content = $('#id_content').val();
	var data = {content: content, page: page};
	
	$.ajaxSettings.async = false;
	$.get(urlList,data,function(res){
		var rows = res.data.rows;
		var str= ``;
		if(rows.length>0){
			$('.nodata').hide()
			$('.itemlist').show()
			for(var i=0;i < rows.length;i++){
				var row = rows[i];
				str +=
				`<div class="item">
					<div onclick="gotoDetailGoods('${row.code}')">
						<div class="top">
							<img src="${row.img}">
						</div>
						<div class="con" title="${row.name}">${row.name}</div>
						<div class="bom">
							<div>￥<span style="font-size: 22px;">${row.salePrice}</span></div>
						</div>
						<div class="bom2">
							<div>库存：${row.stockNum}</div>
						</div>
					</div>
					<div class="bom3">
						<div><button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="toBuy('${row.code}');">点此兑换</button></div>
					</div>
				</div>`
			}
		}else{
			$('.nodata').show()
			$('.itemlist').hide()
		}
		$('.itemlist').html(str)
		totalNum = res.data.totalNum;
	}); 
}

function gotoDetailGoods(code) {
	var w=($(window).width()*0.9);
	var h=($(window).height() - 50);
	layer.open({
		type: 2,
		area: [w+'px', h +'px'],
		fix: true,
		maxmin: false,
		shadeClose: true,
		shade:0.4,
		title: "详情",
		content: '/web/mall/toDetailGoods?code=' + code
	});
}


function toBuy(code) {
	layer.open({
		type: 2,
		area: ['500px', '450px'],
		fix: true,
		maxmin: false,
		shadeClose: true,
		shade:0.4,
		title: "兑换礼品",
		content: '/web/mall/toBuy?code=' + code
	});
}

/*
 * 加载分页导航
 */
function loadLayPage() {
	
	// 分页组件
	laypage.render({
		elem: 'demo2'
		,count: totalNum
		,theme: '#1E9FFF'
		,layout: ['prev', 'page', 'next']
		,limit: 50
		,jump: function(obj, first){
			
			// 首次不执行
			if(!first){
				listData(obj.curr);
			}
		}
	});
}
</script>
</body>
</html>